<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../../css/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="../../css/fullcalendar.css" />
    <link rel="stylesheet" href="../../css/unicorn.main.css" />
    <link rel="stylesheet" href="../../css/unicorn.grey.css" class="skin-color" />
    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/bootstrap.min.js"></script>
    <script src="../lib/angualrjs.min.js"></script>
</head>
<body bgcolor="buttonface">
<div id="header">
    <h1><a href="interface.html">Area</a></h1>
</div>

<div id="sidebar">
    <ul id="uu">
        <li><a href="../../index.html">><i class="icon icon-th-list"></i> <span>TypeScript-Learn</span></a></li>
        <li><a href="hello.html">><i class="icon icon-th-list"></i> <span>Hello TypeScript</span></a></li>
        <li><a href="area.html">><i class="icon icon-th-list"></i> <span>Area</span></a></li>
        <li><a href="interface.html">><i class="icon icon-th-list"></i> <span>Interface</span></a></li>
        <li><a href="lambda.html">><i class="icon icon-th-list"></i> <span>lambda 表达式</span></a></li>
        <li><a href="class.html">><i class="icon icon-th-list"></i> <span>Class</span></a></li>
        <li><a href="extends.html">><i class="icon icon-th-list"></i> <span>Extends</span></a></li>
    </ul>
</div>

<div id="content">
    <h2>接口可以作为一个类型批注。</h2>
    <div> <h1>按键F12，控制台将会打印如下内容</h1></div>
    <div><img src="../../img/demo/interface.png"/></div>
    <pre>
        <code>
            interface Shape {
            name: string;
            width: number;
            height: number;
            color?: string;
            }

            function area(shape : Shape) {
            var area = shape.width * shape.height;
            return "I'm " + shape.name + " with area " + area + " cm squared";
            }

            console.log( area( {name: "rectangle", width: 30, height: 15} ) );
            console.log( area( {name: "square", width: 30, height: 30, color: "blue"} ) );
        </code>
    </pre>


</div>


<script src="interface.js"></script>
</body>
</html>
